.switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mp-spacing-4);
  user-select: none;
}

.switch-hidden {
  opacity: 0;
  margin: var(--mp-spacing-0);
  padding: var(--mp-spacing-0);
  border: 0;
  cursor: pointer;
}

.switch-hidden,
.switch-false .switch-bg,
.switch-true .switch-bg {
  width: calc(var(--mp-size-44) - var(--mp-size-1));
  height: var(--mp-size-24);
}

.switch-false .switch-bg,
.switch-true .switch-bg {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--mp-border-radius-circular);
  background: var(--component-switch-background);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--theme-on-bg-4);
  transition: var(--component-switch-default-transition);
}

.switch-true .switch-bg {
  background: var(--component-switch-checked-background);
}

.switch-false .switch-handle,
.switch-true .switch-handle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mp-size-18);
  height: var(--mp-size-18);
  border-radius: var(--mp-border-radius-circular);
  left: var(--mp-spacing-4);
  background: var(--component-switch-handle-background);
  content: "";
  transition: var(--component-switch-default-transition);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.switch-true .switch-handle {
  transform: translateX(var(--mp-spacing-17));
  background: var(--component-switch-handle-background-active);
}

.switch > :focus-within {
  outline: var(--component-switch-focus-outline);
  outline-offset: var(--component-switch-focus-outline-offset);
}
